<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { route } from 'uview-plus'
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker.vue'
import { getAddressByIdApi, updateAddressApi, addAddressApi, deleteAddressByIdApi } from '@/apis/address.js'
const formRef = ref(null)
const addressData = ref(
	{
		id: null,
		userName: "",
		userPhone: "",
		defaultFlag: 0,
		provinceName: "",
		cityName: "",
		regionName: "",
		detailAddress: ""
	}
)
onLoad(async (e) => {
	if (e && e.id) {
		addressData.value.id = e.id
		const res = await getAddressByIdApi(addressData.value.id)
		addressData.value = res.data.data
		addressValue.value = addressData.value.provinceName + ' ' + addressData.value.cityName + ' ' + addressData.value.regionName
	}
	if (formRef.value) {
		formRef.value.resetFields()
		formRef.value.clearValidate()
	}
})

const formRules = {
	userName: [
		{ required: true, message: '请输入收货人姓名', trigger: 'blur' },
		{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
	],
	userPhone: [
		{ required: true, message: '请输入收货人电话', trigger: 'blur' },
		{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
	],
	detailAddress: [
		{ required: true, message: '请输入详细地址', trigger: 'blur' },
		{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
	]
}

const visible = ref(false)
const onClick = () => {
	visible.value = true
}

// 处理地址
let addressValue = ref('')
const confirm = (v) => {
	visible.value = false
	if (v) {
		addressValue.value = v.provinceName + ' ' + v.cityName + '' + v.areaName
		addressData.value.provinceName = v.provinceName
		addressData.value.cityName = v.cityName
		addressData.value.regionName = v.areaName
	}
}
const uToastRef = ref(null)

// 提交修改或者新增请求
const onSubmit = async () => {
	try {
		await formRef.value.validate()
	} catch (e) {
		console.log(e);
		return
	}

	if (addressData.value.id) {
		// 修改
		await updateAddressApi(addressData.value)
	} else {
		// 新增
		await addAddressApi(addressData.value)
	}

	uToastRef.value.show({
		message: '保存成功',
		type: 'success',
		duration: 1500
	})
	setTimeout(() => {
		route({
			url: '/pages/address/index',
			type: 'redirectTo'
		})
	}, 1200)
}

// 删除地址
const onDel = async (id) => {
	await deleteAddressByIdApi(id)
	uToastRef.value.show({
		message: '删除成功',
		type: 'success',
		duration: 1200
	})
	setTimeout(() => {
		route({
			url: '/pages/address/index',
			type: 'redirectTo'
		})
	}, 1200)
}
</script>
<template>
	<view class="page">
		<view class="nav">
			<up-navbar :placeholder="true" border :autoBack="true" :title="addressData.id ? '编辑地址': '新增地址'" rightIcon="more-dot-fill"></up-navbar>
		</view>

		<view class="form-box">
			<up-form :model="addressData" :rules="formRules" ref="formRef">
				<up-form-item label="姓名" prop="userName" placeholder="请输入姓名">
					<up-input border="bottom" v-model="addressData.userName"></up-input>
				</up-form-item>
				<up-form-item label="电话" prop="userPhone">
					<up-input border="bottom" v-model="addressData.userPhone" placeholder="请输入手机号"></up-input>
				</up-form-item>
				<up-form-item label="地区" @click="onClick">
					<view class="address" v-if="addressValue"> {{ addressValue }} </view>
					<view class="address">
						<cityPicker :column="3"
							:defaultValue="[addressData.provinceName, addressData.cityName, addressData.regionName]"
							:mask-close-able="true" @confirm="confirm" @cancel="visible = false" :visible="visible" />
					</view>
				</up-form-item>

				<up-form-item label="地区" prop="detailAddress">
					<up-textarea v-model="addressData.detailAddress" placeholder="请输入收件详细地址"></up-textarea>
				</up-form-item>
			</up-form>
			<view class="bottom">
				<view class="default">
					<view class="left">
						<view class="set">设置默认地址</view>
						<view class="tips">提醒：每次下单会默认推荐该地址</view>
					</view>
					<view class="right">
						<up-switch v-model="addressData.defaultFlag" :inactiveValue="0" :activeValue="1" size="28"></up-switch>
					</view>
				</view>
				<view class="but-box">
					<up-button shape="circle" @click="onSubmit" style="margin-bottom: 1rem;" color="#69A9AC"
						size="large">保存地址</up-button>
					<up-button @click="onDel(addressData.id)" shape="circle" type="info" v-if="addressData.id"
						size="large">删除</up-button>
				</view>
			</view>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>



<style lang="scss" scoped>
.form-box {
	padding: 2rem 1rem;

	.address {
		padding: 10rpx;
		font-size: 1rem;
		color: #000;
	}

	.bottom {
		.default {
			display: flex;
			justify-content: space-between;
			border-top: 1px solid #EEEFF0;
			border-bottom: 1px solid #EEEFF0;
			margin-top: 30rpx;
			padding: 20rpx 0;

			.tips {
				margin-top: .5rem;
				font-size: 0.8rem;
				color: #ccc;
			}
		}

		.but-box {
			margin-top: 100rpx;
		}
	}
}
</style>
